import React, {Component} from 'react';
import {Layout} from 'antd';
import {withRouter} from 'react-router-dom';
import routes from '../../routes/config';
import SiderMenu from './SiderMenu';
import MaskComponent from './mask';
import './siderCustom.less';
import PropTypes from 'prop-types';


const {Sider} = Layout;

const otherData = [{
  key: '/app/future', title: '近期访问', icon: 'scan',
  subs: [
    {key: '/app/ui/buttons', title: '按钮', component: 'Buttons'},
    {key: '/app/ui/icons', title: '图标', component: 'Icons'},
    {key: '/app/ui/spins', title: '加载中', component: 'Spins'},
  ],
}]

/**
 * otherData 传入 otherData 为近期访问数据，数据格式参考 APP.js otherData 的数据结构
 * menuClick
 */
class SiderCustom extends Component {

  static propTypes = {
    otherData: PropTypes.array,//otherData 传入 otherData 为近期访问数据，数据格式参考 APP.js otherData 的数据结构
    menuClick: PropTypes.func.isRequired,//必填项 返回路由名称
  }

  static defaultProps = {
    otherData: otherData,
    menuClick: () => {}
  }
  state = {
    collapsed: true,
    selectedKey: '/app/dashboard/index',
    maskMenuSelectKey:'',
    isShowMask: false,
    selectedTitleKey:''
  };


  /**
   * 点击侧边栏按钮
   * @param e
   */
  menuClick = e => {
    this.setState({
      selectedKey: e.key,
      collapsed: true,
    });
    this.props.menuClick && this.props.menuClick(e.key);
  };

  /**
   * 点击 遮罩层按钮
   * @param e
   */
  maskMenuClick=(e)=>{
    this.setState({
      selectedKey: e.selectedKey,
      maskMenuSelectKey:e.maskMenuSelectKey,
    });
    this.props.menuClick && this.props.menuClick(e.maskMenuSelectKey);
  }

  /**
   * 点击 全功能导航
   * @param e
   */
  menuTitleClick=e=>{
    const show = this.state.selectedTitleKey==='';
    this.setState({
      selectedTitleKey: show?'app':'',
      collapsed: false,
      isShowMask:show
    });
  }


  handleMouseOver = () => {
    if(this.state.collapsed){
      this.setState({
        collapsed: false,
      });
    }

  }
  handleMouseOut = () => {
    if(!this.state.isShowMask&&!this.state.collapsed){
      this.setState({
        collapsed: true,
        isShowMask: false,
      });
    }
  }





  render() {
    return (
      <div className="siderCustom-page flex-box">
        <Sider
          trigger={null}
          breakpoint="lg"
          collapsed={this.state.collapsed}
          style={{overflowY: 'auto'}}
          className="siderCustom-component"
          onMouseOver={this.handleMouseOver}
          onMouseLeave={this.handleMouseOut}
        >
          <div className="sider-header">
            <SiderMenu
              menus={[{key: 'app', icon: 'menu-unfold', title: '全功能导航'}]}
              mode="inline"
              onClick={this.menuTitleClick}
              className="menu-container"
              selectedKeys={[this.state.selectedTitleKey]}
            />
          </div>
          <SiderMenu
            menus={routes.menus}
            onClick={(e)=>this.menuClick(e)}
            mode="inline"
            selectedKeys={[this.state.selectedKey]}
            className="menu-container"
          />

        </Sider>
        <MaskComponent
          leaveMask={()=>{
            this.setState({collapsed: true,selectedTitleKey:'',isShowMask:false})}
          }
          otherData={this.props.otherData}
          onClick={(e)=>this.maskMenuClick(e)}
          maskMenuSelectKey={this.state.maskMenuSelectKey}
          isShow={this.state.isShowMask}/>
      </div>
    )
  }
}

export default withRouter(SiderCustom);
